<template>
    <div class="heart" id="heart">
      <el-breadcrumb separator="">
        <el-breadcrumb-item :to="{ path: '/dataQuery/dataQuery' }">数据查询</el-breadcrumb-item>
        <el-breadcrumb-item
        ><a></a></el-breadcrumb-item
      >
      </el-breadcrumb>
      <div class="search">
        <div style="">
            <el-date-picker
            v-model="timeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>
          <el-select
            v-model="dataType"
            placeholder="数据类型"
            size="large"
            style="width: 240px"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-cascader v-model="timeScale" :options="options" placeholder="公司及排污口" />
        <el-button type="primary" style="width: 80px;">查询</el-button>
      </div>
      <el-card style="height: 70px; margin-top: 20px;" shadow="hover">
        <el-button type="primary" style="width: 80px;" @click="()=>{showChart = false}">表格视图</el-button>
        <el-button type="primary" style="width: 80px;" @click="()=>{showChart = true}">图表视图</el-button>
        <el-button type="primary" style="width: 80px;" @click="()=>{dialog = true}"> 导出数据</el-button>
        <el-dialog v-model="dialog" title="导出数据" width="800" destroy-on-close>
          选择时间范围：<el-date-picker
            v-model="timeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
          <a href="../../assets/导出数据.xls">导出数据</a>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialog = false">取消</el-button>
              <el-button type="primary" @click="daochu">
                导出
              </el-button>
            </div>
          </template>
        </el-dialog>
      </el-card>
      <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%; margin-top: 20px"
      @sort-change="handleSort"
      v-show="!showChart"
    >
      <el-table-column label="监控时间">
        <template #default="scope">{{ scope.row.updateTime.replace('T',' ') }}</template>
      </el-table-column>
      <el-table-column  label="生产施工况标记">
        <el-table-column prop="phAverage" label="自动" width="60"><span style="color: rgb(5, 205, 5);">正常</span></el-table-column>
        <el-table-column prop="phAverage" label="人工" width="60"><span style="">——</span></el-table-column>
      </el-table-column>
      <el-table-column  label="流量">
        <el-table-column prop="dataTotal" label="累计流量(立方米)" />
        <el-table-column  label="自动检测设备维护标记">
          <el-table-column label="自动" width="60"><span style="color: rgb(5, 205, 5);">正常</span></el-table-column>
          <el-table-column label="人工" width="60"><span style="">——</span></el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column  label="PH">
        <el-table-column  label="检测值">
          <el-table-column prop="dataMin" label="最小值" />
          <el-table-column prop="dataAvg" label="平均值" />
          <el-table-column prop="dataMax" label="最大值" />
        </el-table-column>
        <el-table-column  label="标准值" >6-9</el-table-column>>
        <el-table-column  label="自动检测设备维护标记">
          
          <el-table-column label="人工" width="60"><span style="color: rgb(5, 205, 5);">正常</span></el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column  label="化学需氧量">
        <el-table-column prop="dataTest" label="检测值" />
        <el-table-column label="标准值" >15</el-table-column>
        <el-table-column prop="dataLet" label="排放量" />
      </el-table-column>
    </el-table>
    <!-- <div class="pagination" v-show="!showChart">
      <Pagination v-model:page="page"  :total="total" @pagination="getData" />
    </div> -->
    <div id="chart" style="width: 1000px; height: 300px; margin-top: 10px;" v-show="showChart"></div>
    <div id="chart1" style="width: 1000px; height: 300px; margin-top: 10px;" v-show="showChart"></div>
    <div id="chart2" style="width: 1000px; height: 300px; margin-top: 10px;" v-show="showChart"></div>
    </div>
      
  </template>
  <script lang="ts" setup>
  import { ref, watch, onMounted, reactive,  } from 'vue'
  import Pagination from '../../components/Pagination.vue'
  import http from '@/http/http'
  import *  as echart from "echarts"
import { ElMessage } from 'element-plus';
    let timeRange =  ref('')
    let timeScale = ref()
    let dataType = ref()
    let showChart = ref(false)
    let width = document.getElementById('heart')?.clientWidth
    let height= document.getElementById('heart')?.clientHeight
    const options = [

  {
    value: '米鹰讯1',
    label: '米鹰讯1',
    children: [
      {
        value: '排污口1',
        label: '排污口1',
      },
      {
        value: '排污口2',
        label: '排污口2',
      },
      {
        value: '排污口3',
        label: '排污口3',
      },
    ],
  },
  {
    value: '米鹰讯2',
    label: '米鹰讯2',
    children: [
      {
        value: '排污口4',
        label: '排污口4',
      },
      {
        value: '排污口5',
        label: '排污口5',
      },
      {
        value: '排污口6',
        label: '排污口6',
      },
    ],
  },
  {
    value: '米鹰讯3',
    label: '米鹰讯3',
    children: [
      {
        value: '排污口7',
        label: '排污口7',
      },
      {
        value: '排污口8',
        label: '排污口8',
      },
      {
        value: '排污口9',
        label: '排污口9',
      },
    ],
  },
  {
    value: '米鹰讯4',
    label: '米鹰讯4'
  },
  {
    value: '米鹰讯5',
    label: '米鹰讯5'
  },
  {
    value: '米鹰讯6',
    label: '米鹰讯6'
  },
  {
    value: '米鹰讯7',
    label: '米鹰讯7'
  },
  {
    value: '米鹰讯8',
    label: '米鹰讯8'
  },
  {
    value: '米鹰讯9',
    label: '米鹰讯9'
  },

  {
    value: '米鹰讯10',
    label: '米鹰讯10'
  },
]
const options1 = [
  {
    value: 1,
    label: '排污数据',
  },
  {
    value: 2,
    label: '用电数据',
  }
]
// var chartDom = document.getElementById('chart')!
// var myChart = echart.init(chartDom)
let myChart = ref()
let myChart1 = ref()
let myChart2 = ref()
let dialog = ref()
onMounted(()=>{
  myChart.value = echart.init(document.getElementById('chart')!)
  myChart1.value = echart.init(document.getElementById('chart1')!)
  myChart2.value = echart.init(document.getElementById('chart2')!)
  // getData()
})

let changeChart = ()=>{
    var optionBar = {
         title: {
         	  text: '累计流量'
         },
         tooltip: {},
         legend: {
         	data:['销量']
        },
         //设置X轴
        xAxis: {
           	data: tableData.value.map((item:any)=>{
            return item.updateTime.replace('T',' ')
          }),
          inverse: true,
          axisLabel: {
      //  X 坐标轴标签相关设置
      interval: 0,
      rotate: '45'
    }
        },
        yAxis: {},
        series: [{
      	  name: '累计流量',
        	type: 'line',
        	data: tableData.value.map((item:any)=>{
            return item.dataTotal
          }), 
       	 }],
    };
    var optionBar1 = {
         title: {
         	  text: 'PH值'
         },
         tooltip: {},
         legend: {
         	data:['销量']
        },
         //设置X轴
        xAxis: {
           	data: tableData.value.map((item:any)=>{
            return item.updateTime.replace('T',' ')
          }),
          inverse: true,
          axisLabel: {
      //  X 坐标轴标签相关设置
      interval: 0,
      rotate: '45'
    }
        },
        yAxis: {
        },
        series: [{
      	  name: '最大值',
        	type: 'line',
        	data: tableData.value.map((item:any)=>{
            return item.dataMax - 0
          }), 
          stack: '1'
       	 },{
          name: '最大值',
        	type: 'line',
        	data: tableData.value.map((item:any)=>{
            return item.dataMin - 0
          }), 
          stack: '2'
         },{
          name: '标准值',
        	type: 'line',
        	data: [6,6,6,6,6,6,6,6,6,6], 
         },{
          name: '标准值',
        	type: 'line',
        	data: [9,9,9,9,9,9,9,9,9,9], 
        }],
    };
    var optionBar2 = {
         title: {
         	  text: '化学需氧量'
         },
         tooltip: {},
         legend: {
         	data:['销量']
        },
         //设置X轴
        xAxis: {
           	data: tableData.value.map((item:any)=>{
            return item.updateTime.replace('T',' ')
          }),
          inverse: true,
          axisLabel: {
      //  X 坐标轴标签相关设置
      interval: 0,
      rotate: '45'
    }
        },
        yAxis: {
        },
        series: [{
      	  name: '最大值',
        	type: 'line',
        	data: tableData.value.map((item:any)=>{
            return item.dataTest - 0
          }), 

       	 },{
          name: '最大值',
        	type: 'line',
        	data: tableData.value.map((item:any)=>{
            return item.dataLet - 0
          }), 
         },{
          name: '标准值',
        	type: 'line',
        	data: [13,13,13,13,13,13,13,13,13,13], 
         }],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.value.setOption(optionBar);
    myChart1.value.setOption(optionBar1);
    myChart2.value.setOption(optionBar2);
}


let daochu = ()=>{
  dialog.value = false
  ElMessage.success('导出成功')

}
let getData = ()=>{
  let num = 0
  setInterval(()=>{
  // changeChart()

    http.post('/api/data/insert',null,{
      params:{
        count: num++
      }
    }).then(res=>{
      http.get('/api/data/page').then(res=>{
      tableData.value = res.data.records
      console.log(tableData.value)
      changeChart()
    })
    })
  },1000)
  
}
    
    
    

    const tableData = ref()
    interface Instrument {
      id: number,
      companyName: string,
      outputName: string,
      instrumentName: string,
      instrumentMIN: string,
      password: string,
      isUsing: boolean
    }
    let selected = ref<number[]>([])
    const handleSelectionChange = (a:Instrument[])=>{
      selected.value = [];
      a.forEach((row:Instrument)=>{
        selected.value.push(row.id)
      })
      console.log(selected.value)
    }
  
    let handleSort = (data: {column: any, prop: string, order: any })=>{
      console.log(data)
    }
    let currentPage = ref(1)
    let pageSize = ref(10)
    let total = ref(100)
    let page = ref(1)

  </script>
  <style>
    .heart{
      width: 95%;
      margin: 20px auto;
    }
    .search{
      margin-top: 50px;
      display: flex;
      justify-content: space-around;
    }
    .pagination{
      margin-top: 40px;
      display: flex;
      justify-content: center;
    }
  </style>